<template>
    <div class="my_wallet">
        <div class="title">{{ $t('my.我的钱包') }}</div>
        <div class="show_view">
            <div class="sub_title">{{ $t('my.账户余额（元）') }}</div>
            <div class="price">
                <div class="unit">￥</div>
                <div class="value">{{ balance }}</div>
            </div>
            <div class="btn_view">
                <div class="item" @click="show_dialog('recharge')">{{ $t('my.充值') }}</div>
                <div class="item" @click="show_dialog('withdraw')">{{ $t('my.提现') }}</div>
            </div>
        </div>
        <div class="title">
            <div>{{ $t('my.余额明细') }}</div>
            <div>
                <el-date-picker v-model="date" type="daterange" :range-separator="$t('my.至')" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd">
                </el-date-picker>
                <el-select v-model="value" :placeholder="$t('placeholder.请选择')">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="primary" @click="query">{{ $t('my.查询') }}</el-button>
            </div>
        </div>
        <div class="list">
            <el-table :data="tableData" height="481" header-row-class-name="table_header_row"
                header-cell-class-name="table_header_cell" row-class-name="table_row" cell-class-name="table_cell">
                <el-table-column :label="$t('table.时间')" prop="createtime" />
                <el-table-column :label="$t('table.全部类型')" prop="change_type" />
                <el-table-column :label="$t('table.余额')" prop="money" />
            </el-table>
        </div>
        <div class="page_view">
            <el-pagination background layout="prev, pager, next" :current-page="page" :total="total"
                @current-change="change" />
        </div>

        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="530px" :modal="true" :center="true"
            :show-close="false" append-to-body @close="userIndex">
            <Recharge v-if="type == 'recharge'" @ok="dialog_ok" />
            <Withdraw :balance="balance" v-else @ok="dialog_ok" />
        </el-dialog>
    </div>
</template>

<script>
import Recharge from "@/components/my/Recharge.vue"
import Withdraw from "@/components/my/Withdraw.vue"

export default {
    components: {
        Recharge,
        Withdraw
    },
    data() {
        return {
            dialogTitle: this.$t('my.充值'),
            dialogVisible: false,

            balance: 0.00,
            type: "recharge",
            date: "",

            options: [],
            value: '',

            page: 1,
            search: '',
            tableData: [],
            total: 0
        }
    },
    async mounted() {
        let { type_list } = await this.$api.usersApi.money_log({
            page: 1,
            page_size: 1
        });
        this.options = type_list.map((item, index) => ({
            label: item,
            value: index
        }));
        this.value = 0;

        this.userIndex();
        this.getList();
    },
    methods: {
        async userIndex() {
            const { userinfo, unread_count } = await this.$api.usersApi.userIndex();
            this.balance = userinfo.money;
            this.$store.commit('changeUserInfo', userinfo)
            this.$store.commit('changeUnreadCount', unread_count)
        },
        query() {
            this.page = 1;
            this.getList();
        },
        change(value) {
            this.page = value;
            this.getList();
        },
        async getList() {
            let start_time = '', end_time = '';
            if (this.date.length) [start_time, end_time] = this.date;

            let { list: res } = await this.$api.usersApi.money_log({
                page: this.page,
                page_size: 10,
                start_time: start_time,
                end_time: end_time,
                type: this.value
            });
            this.total = res.total;
            this.tableData = res.data;
        },
        show_dialog(type) {
            if (type == 'recharge') {
                this.dialogTitle = this.$t('my.充值')
            } else {
                this.dialogTitle = this.$t('my.提现')
            }
            this.type = type;
            this.dialogVisible = true;
        },
        dialog_ok() {
            this.dialogVisible = false;
            this.userIndex();
            this.query();
        }
    },
}
</script>

<style lang="scss" scoped>
.my_wallet {
    min-width: 100%;
    min-height: 100%;
    border-radius: 10px 10px 0 0;
    padding: 8px 24px 0;
    box-sizing: border-box;
    background: #FCFCFE;
    overflow: hidden;

    .title {
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
    }

    .show_view {
        height: 200px;
        padding: 24px;
        box-sizing: border-box;
        background: url(@/assets/image/bg3.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .sub_title {
            font-size: 18px;
            color: #FFFFFF;
        }

        .price {
            display: flex;
            align-items: baseline;

            .unit {
                font-size: 24px;
                color: #FFFFFF;
            }

            .value {
                font-size: 32px;
                color: #FFFFFF;
            }
        }

        .btn_view {
            display: flex;

            .item {
                width: 140px;
                height: 44px;
                line-height: 44px;
                text-align: center;
                font-size: 16px;
                color: #2273FF;
                margin-right: 20px;
                background: #FFFFFF;
                border-radius: 66px 66px 66px 66px;
                cursor: pointer;
            }
        }
    }
}
</style>

<style lang="scss">
.my_wallet {
    .el-table {
        border-radius: 14px;
        overflow: hidden;

        .table_header_row {
            background: #3E8BFF;
        }

        .table_header_cell {
            height: 40px;
            text-align: center;
            font-size: 16px;
            color: #FFFFFF;
            background: #3E8BFF;
        }

        .table_cell {
            height: 44px;
            font-size: 14px;
            color: #333333;
            text-align: center;
        }
    }
}
</style>